import React from 'react';
import './Modal.css';

interface ModalProps {
  title: string;
  children: React.ReactNode;
  onClose: () => void;
  onConfirm?: () => void;
  confirmText?: string;
  cancelText?: string;
  showCancel?: boolean;
}

export default function Modal({ 
  title, 
  children, 
  onClose, 
  onConfirm, 
  confirmText = '确认', 
  cancelText = '取消', 
  showCancel = true 
}: ModalProps) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>{title}</h3>
        </div>
        <div className="modal-body">
          {children}
        </div>
        {showCancel && (
          <div className="modal-footer">
            <button className="btn-cancel" onClick={onClose}>{cancelText}</button>
            <button className="btn-confirm" onClick={onConfirm || onClose}>{confirmText}</button>
          </div>
        )}
      </div>
    </div>
  );
}

